<template>
	<view class="page">
		<view class="title">请上传身份证人像面</view>
		<view class="img" @click="showActionsheet(1)">
			<image :src="url1" mode="scaleToFill" />
		</view>
		<view class="title">请上传身份证国徽面</view>
		<view class="img" @click="showActionsheet(2)">
			<image :src="url2" mode="scaleToFill" />
		</view>
		<view class="btn headle">确定</view>
		<view class="tips">
			<image src="/static/icon/dun-pai@3x.png" mode="scaleToFill" />
			<text>国家级数据加密保护，仅用于贷款审核</text>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="pop1">
				<view class="pop_one">请告诉我们您未认证的理由</view>
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
				<button class="pop_conform1" @click="commit">继续借款</button>
				<view class="pop_b1">
					<text @click="handleBack">暂时放弃</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup1" type="center">
			<view class="pop">
				<image src="/static/icon/tishi.png" class="pop_img" />
				<view class="pop_text">该项认证非常重要，仅用作借款 审核，不完成将无法借款，确定 要放弃吗?</view>
				<button class="pop_conform" @click="commit">立即申请</button>
				<view class="pop_b">
					<text @click="handleNavBack">暂时放弃</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { pathToBase64 } from 'image-tools'
import api from '@/api'
export default {
	components: {},
	data() {
		return {
			checked: true,
			showDow: false,
			url1: '/static/icon/ren_xiang.png',
			url2: '/static/icon/guo_hui.png',
			list: [
				{
					name: '身份证不在身边',
					disabled: false
				},
				{
					name: '等一会儿再操作',
					disabled: false
				},
				{
					name: '拍照失败',
					disabled: false
				},
				{
					name: '照片上传失败',
					disabled: false
				},
				{
					name: '不想提供身份证',
					disabled: false
				},
				{
					name: '其他',
					disabled: false
				}
			],
			value: '身份证不在身边'
		}
	},
	//监听原生返回按钮
	onBackPress() {
		// if (e.from == 'backbutton') {
		// 	if (!this.isActive) {
		// 		this.$refs.popup.open()
		// 	}
		// 	return true
		// }
		this.$refs.popup.open()
		return true
	},
	computed: {},
	watch: {},
	onLoad() {},
	onShow() {},
	onReady() {},
	// 方法集合
	methods: {
		showActionsheet(i) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera', 'album'],
				success: (res) => {
					pathToBase64(res.tempFilePaths[0]).then(async (ret) => {
						const map = {
							1: 'url1',
							2: 'url2'
						}
						const url = await this.update(JSON.stringify(ret), i)
						this[map[i]] = url.url
					})
				}
			})
		},
		async update(data, num) {
			try {
				const res = await api.authen({ file: data, file_tag: num })
				return res
			} catch (error) {
				console.log(error)
			}
		},
		handleBack() {
			this.$refs.popup.close()
			this.$refs.popup1.open()
		},
		handleNavBack() {
			uni.switchTab({
				url: '/pages/financial/index'
			})
		},
		open() {
			this.$refs.popup.open()
		},
		commit() {
			this.$refs.popup.close()
			this.$refs.popup1.close()
		},
		popupClose() {
			if (!this.checked) {
				this.showDow = true
			}
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			console.log(e)
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			console.log(e)
		}
	},
	onHide() {},
	onUnload() {}
}
</script>
<style lang="scss" scoped>
.page {
	padding: 0 32rpx;
	.title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
		margin-top: 80rpx;
	}
	.img {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		image {
			width: 580rpx;
			height: 328rpx;
		}
	}

	.btn {
		margin-top: 136rpx;
		height: 92rpx;
		background: linear-gradient(270deg, #0481fe 0%, #40c5fe 100%);
		line-height: 92rpx;
		text-align: center;
		border-radius: 70rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}
	.tips {
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #bdbdbd;
		image {
			width: 24rpx;
			height: 28rpx;
			margin-right: 12rpx;
		}
	}
}
.pop1 {
	width: 532rpx;
	height: 710rpx;
	border-radius: 16rpx;
	background-color: #ffffff;
	padding-top: 36rpx;
	.pop_one {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.u-radio-group[data-v-4a02ae53] {
		display: block;
		margin-left: 50rpx;
		margin-top: 20rpx;
	}
	.u-radio {
		display: flex;
		margin-bottom: 12rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.pop_conform1 {
		width: 448rpx;
		height: 88rpx;
		background: #3478f2;
		border-radius: 16rpx;
		margin: 0 auto;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		margin-top: 20rpx;
	}
	.pop_b1 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #696969;
		margin: 0 auto;
		text-align: center;
		margin-top: 40rpx;
	}
}
.pop {
	width: 606rpx;
	border-radius: 16rpx;
	background-color: #ffffff;
	position: relative;
	padding: 62rpx 0;
	text-align: center;
	.pop_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.pop_dec {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #0780fe;
	}
	.pop_product {
		margin-top: 28rpx;
		.product_img {
			width: 112rpx;
			height: 112rpx;
			background: #3478f2;
			border-radius: 8rpx;
			margin: 12rpx auto;
		}
		.product_name {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.pop_b {
		margin-top: 64rpx;
		display: flex;
		justify-content: center;
		flex: 1;
		text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #696969;
		}
	}
	.pop_img {
		width: 161rpx;
		height: 157rpx;
	}
	.pop_text {
		width: 448rpx;
		margin: 0 auto;
		font-size: 32rpx;
		margin-top: 40rpx;
		color: #333;
	}
	.pop_ipt {
		display: block;
		box-sizing: border-box;
		margin: 0 auto;
		width: 448rpx;
		height: 80rpx;
		line-height: 40px;
		margin-top: 24rpx;
		padding-top: 10rpx;
	}
	.pop_conform {
		margin-top: 40rpx;
		width: 448rpx;
		height: 88rpx;
		background-color: #3478f2;
		font-size: 36rpx;
		color: #ffffff;
		border-radius: 16rpx;
		font-family: PingFang SC;
		font-weight: 400;
	}
	.pop_conform:active {
		opacity: 0.5;
	}
}
</style>
